<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- jQuery Mobile -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


    <!-- PhoneGap -->
    <script src="cordova-2.3.0.js"></script>


    <!-- Partial js -->
    <script src="js/database.js"></script>
    <script src="js/geolocationData.js"></script>
    <script src="js/imageData.js"></script>

    <!-- Personal CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <script type="text/javascript">
        document.addEventListener("deviceready",onDeviceReady,false);

        function onDeviceReady() {        
            //recupero gli elementi presenti nel database
            getItemsImage();

            $('.photo').bind('touchstart', function() {
                switch($(this).attr('id')) {
                    case 'cameraPhoto':
                        capturePhoto();
                    break;
                    case 'libraryPhoto':
                        getPhoto();
                    break;
                }
            });
        }

        // getItems verrà eseguita se la chiamata al db avviene con successo
        function getItemsImage() {
            db = getDatabase();
            db.transaction(function(tx) {
                tx.executeSql("SELECT * FROM myDiary WHERE type='image' ORDER BY date DESC", [], querySuccess, databaseError);
            }, databaseError);
        }
    
    </script>
</head>
<body>

    <div data-role="page" data-add-back-btn="true">

        <header data-role="header" data-position="fixed">
            <h1>Cattura Immagine</h1>
        </header>

        <div data-role="content">
            <h1>myImage</h1>
            <div id="messageError"></div>

            <button class="photo" id="cameraPhoto">Take a new Photo</button><br />
            <button class="photo" id="libraryPhoto">Select From Library</button><br />

            <div id="message"></div><br />
            <img id="image" src="">

            <div id="objects" data-role="collapsible-set" data-theme="d" data-content-theme="d"></div>
        </div>

        <footer data-role="footer" data-position="fixed">
            &copy; myUdine;
        </footer>
    </div>
    
</body>
</html>